Ext.regController("StageController", {
	"viewInit": function(opt) {
		$STAGE.width = CeleBrick.views.stageView.getWidth();
		$STAGE.height = CeleBrick.views.stageView.getHeight();
		divStage.applyStyles({
			"width": $STAGE.width + "px",
			"height": $STAGE.height + "px",
			"background-size": $STAGE.width + "px " + $STAGE.height + "px"
		});

		divCountDown.applyStyles({
			"top": $STAGE.height/5 + "px",
			"left": ($STAGE.width - $COUNT_DOWN.width)/2 + "px"
		});

		$BRICK.top = $STAGE.height - divBrick.getHeight();
		$BRICK.left = ($STAGE.width - divBrick.getWidth())/2;
		divBrick.applyStyles({
			"top": $BRICK.top + "px",
			"left": $BRICK.left + "px"
		});

		divDifficulty.setTop($STAGE.height - divDifficulty.getHeight() - 10);
		divHighScore.setTop($STAGE.height - divHighScore.getHeight() - 10);
	},

	"stageInit": function(opt) {
		if (opt.mode != iCurMode) {
			audPlayback.el.child("audio").dom.src = "rsc/playback." + opt.mode + ".mp3";
			audPlayback.el.child("audio").dom.load();
		}
		audPlayback.play();
		divCountDown.applyStyles({
			"background-image": ""
		});

		for (i = 0; i < $CELEB.max_clone; i++) {
			divCeleb[i].hide().removeCls("brick");
			divCritical[i].hide().removeCls("brick");
		}

		iCurMode = opt.mode;
		iCurLevel = opt.level;
		iCelebCount = iLevelScore = 0;
		iTotalScore = opt.totalScore;
		displayText();

		iCurTimeAlive = $TIME_MILESTONE.alive - iCurLevel*$TIME_MILESTONE.level_dev;
		Ext.dispatch({
			controller: this,
			action: "showCountDown",
			timeout: iCurTimeAlive,
			mode: opt.mode
		});
	},

	"stageAnimate": function(opt) {
		divStage.on("tap", function(evt) {
			var beatCeleb = Ext.get(document.elementFromPoint(evt.pageX, evt.pageY));

			if (beatCeleb == "undefined" || !beatCeleb.hasCls("celeb"))
				return;
				
			var beatCritical = Ext.get(Ext.query("#critical-" + beatCeleb.id[6])[0]);

			if (beatCeleb.hasCls("brick"))
				return;

			brickPos = {x: evt.pageX - divBrick.getWidth()/2, y: evt.pageY - divBrick.getHeight()/2};
			
			brickEffect = [
				[
					"translate(0px, 0px)",
					"rotate(" + $BRICK.angle + "deg)"
				],
				[
					"translate(" + (brickPos.x  - $BRICK.left) + "px, " + (brickPos.y - $BRICK.top) + "px)",
					"rotate(" + $BRICK.spin + "deg)"
				]
			]
			
			new Ext.Anim({
				from: {"-webkit-transform": brickEffect[0].join(" ")},
				to: {"-webkit-transform": brickEffect[1].join(" ")},
				before: function() {
					var brickBeat = {
						x: Math.abs(brickPos.x - beatCeleb.getX()),
						y: Math.abs(brickPos.y - beatCeleb.getY())
					}, bCritical = false;
					if (brickBeat.x <= $BRICK.beat_dev && brickBeat.y <= $BRICK.beat_dev) {
						if (brickBeat.x <= $BRICK.critical_beat && brickBeat.y <= $BRICK.critical_beat) {
							beatCritical.addCls("brick");
							bCritical = true;
						}
						calculateScore(bCritical);
						beatCeleb.addCls("brick");
						displayText();
					}
				},
				after: function() {
					if (beatCeleb.hasCls("brick"))
						beatCeleb.setStyle({
							"background-image": "url(rsc/celeb-brick.png)"
						});
					if (beatCritical.hasCls("brick"))
						beatCritical.show();
				},
				duration: $BRICK.duration
			}).run(divBrick);
		});
	},

	"showCountDown": function(opt) {
		divCountDown.show();
		for (var i = 4; i >= 1; i--) {
			Ext.defer(function(i) {
				divCountDown.applyStyles({
					"background-image": "url(rsc/count-down-" + (i-1) + ".png)"
				});
				Ext.Anim.run(divCountDown, "fade", {duration: opt.timeout/2, out: false});
			}, (4.5-i)*(opt.timeout/2), this, [i]);
		}
		Ext.defer(function() {
			divCountDown.hide();
			Ext.dispatch({
				controller: CeleBrick.controllers.gameController,
				action: "mode-" + opt.mode,
			});
		}, 2.25*opt.timeout, this);
	}
});

CeleBrick.controllers.stageController = Ext.ControllerManager.get("StageController");